<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<style type="text/css">
    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

</style>
<title>物流员任务分发 - 云超市</title>
<%--<jsp:include page="../../head.jsp"/>--%>

<div class="" id="app">
    <form class="form-inline" style="margin-top: 20px; margin-bottom: 5px;">
        <%-- <div class="form-group">
             <input id="courierInput" class="form-control input-sm" type="text" placeholder="请选择物流员">
         </div>
         <div class="form-group">
             <input id="driverInput" class="form-control input-sm" type="text" placeholder="请选择驾驶员">
         </div>
         <div class="form-group">
             <input id="licenseInput" class="form-control input-sm" type="text" placeholder="请选择车辆">
         </div>
         <div class="form-group">
             <input id="pathInput" class="form-control input-sm" type="text" placeholder="请选择路线">
         </div>--%>
        <div class="form-group">
            <input id="beginOperatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择任务开始时间">
        </div>
        <div class="form-group">
            <input id="endOperatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择任务结束时间">
        </div>
        <button type="button" class="btn btn-sm btn-success" @click="getOrder(1);">查询</button>
        <button type="button" class="btn btn-sm btn-info" onclick="javascript:$('#myModal').modal('show');">添加</button>
    </form>

    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">路线分配列表</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 365px">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <th>物流员(电话)</th>
                <th>协助物流员(电话)</th>
                <th>驾驶员(电话)</th>
                <th>车辆</th>
                <th>路线</th>
                <th>区域</th>
                <th>配送时间</th>
                <th>分配时间</th>
                <th>操作</th>

            </tr>
            </thead>
            <tbody>

            <tr v-for="(order, index) in orderList">
                <td>{{order.COURIER}} {{'(' + order.COURIER_P + ')'}}</td>
                <td>{{order.ASSIST_COURIER}} {{order.ASSIST_COURIER_P ? ('(' + order.ASSIST_COURIER_P + ')') : ''}}</td>
                <td>{{order.DRIVER}} {{order.DRIVER_P ? ('(' + order.DRIVER_P + ')') : ''}}</td>
                <td>{{order.LICENSE}}</td>
                <td>{{order.PATH}}</td>
                <td>{{order.CHANNEL}}</td>
                <td>{{order.DELIVERY_TIME}}</td>
                <td>{{order.OPERATOR_TIME}}</td>
                <td>
                    <a href="javascript:void(0);" style="color: #8A3104;" @click="revocation(index)">撤销</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">维护路线</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">配送时间：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="add_time" placeholder="请选择配送时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">区域：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="su.channel">
                                    <option value="">——请选择区域——</option>
                                    <option v-for="channel in channels" :value="channel">{{channel}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">物流员：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="su.courier">
                                    <option value="">——请选择物流员——</option>
                                    <option v-for="courier in params.couriers" :value="[courier.data,courier.value]">
                                        {{courier.value}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">协助物流员：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="su.assist">
                                    <option value="">——请选择协助物流员——</option>
                                    <option v-for="courier in params.assists" :value="[courier.data,courier.value]">
                                        {{courier.value}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">驾驶员：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="su.driver">
                                    <option value="">——请选择驾驶员——</option>
                                    <option v-for="driver in params.drivers" :value="[driver.data,driver.value]">
                                        {{driver.value}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">车牌号：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="su.license">
                                    <option value="">——请选择车辆——</option>
                                    <option v-for="license in params.licenses" :value="[license.data,license.value]">
                                        {{license.value}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">路线：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="su.path">
                                    <option value="">——请选择路线——</option>
                                    <option v-for="path in params.paths" :value="[path.data,path.value]">{{path.value}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="submitData">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            users: [],
            licenses: [],
            paths: [],
            channels: ['本部', '盘县'],
            re: {
                courier: '',
                driver: '',
                license: '',
                path: '',
                beginOperatorTime: '',
                endOperatorTime: '',
                page: '1',
            },
            su: {
                channel: '',
                courier: '',
                assist: '',
                driver: '',
                license: '',
                path: '',
                time : '',
            },
            params: {
                couriers: [],
                assists: [],
                drivers: [],
                licenses: [],
                paths: [],
            },
        },
        methods: {
            getInitData: function () {
                    //this.getInitParams('');

                $('#beginOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                });

                $('#endOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                    //endDate : day1,
                });

                $("#beginOperatorTimeInput").on("change", function () {
                    app.re.beginOperatorTime = this.value
                });

                $("#endOperatorTimeInput").on("change", function () {
                    app.re.endOperatorTime = this.value
                });

                $('#add_time').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                    //endDate : day1,
                });

                $("#add_time").on("change", function () {
                    app.su.time = this.value;
                    app.getInitParams(this.value);
                });
            },
            getInitParams : function (time) {

                if (time.length != 10) {
                    return;
                }



                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getCourierSelectData?stringMap[time]=' + time,
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        if (data.success) {

                            vm.users = data.data.couriers;
                            vm.params.couriers = data.data.couriers;
                            vm.params.drivers = data.data.couriers;
                            vm.params.assists = data.data.couriers;
                            vm.licenses = data.data.licenses;
                            vm.paths = data.data.paths;
                            vm.params.licenses = data.data.licenses;
                            vm.params.paths = data.data.paths;

                            vm.su.channel = ''; //解决bug，防止先选择区域，再选择时间（获取到的是所有参数），最后选择其它参数，可以混乱选择其它区域的数据。
                            return;
                            $('#courierInput').autocomplete({
                                lookup: vm.couriers,
                                minChars: 0,
                            });
                            $('#driverInput').autocomplete({
                                lookup: vm.drivers,
                                minChars: 0,
                            });
                            $('#licenseInput').autocomplete({
                                lookup: vm.licenses,
                                minChars: 0,
                            });
                            $('#pathInput').autocomplete({
                                lookup: vm.paths,
                                minChars: 0,
                            });
                        } else {
                            layer.msg('获取参数失败');
                        }

                    },
                    error: function (error) {
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });
            },
            submitData: function () {
                var vm = this;
                if (!vm.su.courier) {
                    layer.msg('请选择物流员');
                    return;
                }
                /*if (!vm.su.assist) {
                    layer.msg('请选协助择物流员');
                    return;
                }
                if (!vm.su.driver) {
                    layer.msg('请选择驾驶员');
                    return;
                }*/
                if (!vm.su.license) {
                    layer.msg('请选择车辆');
                    return;
                }
                if (!vm.su.time) {
                    layer.msg('请选择配送时间');
                    return;
                }
                if (!vm.su.path) {
                    layer.msg('请选择物路线');
                    return;
                }
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/submitCourierData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        objectMap: {
                            channel: vm.su.channel,
                            courier: vm.su.courier[0],
                            courierName: vm.su.courier[1],
                            assist: vm.su.assist[0] ? vm.su.assist[0] : '',
                            assistName: vm.su.assist[1] ? vm.su.assist[1] : '',
                            driver: vm.su.driver[0] ? vm.su.driver[0] : '',
                            driverName: vm.su.driver[1] ? vm.su.driver[1] : '',
                            license: vm.su.license[0],
                            licenseName: vm.su.license[1],
                            path: vm.su.path[0],
                            pathName: vm.su.path[1],
                            time: vm.su.time,
                        }
                    },
                    //async : false,
                    success: function (data) {
                        layer.closeAll('loading');
                        layer.msg(data.message);
                        if (data.success) {
                            vm.su.courier = '';
                            vm.su.driver = '';
                            vm.su.license = '';
                            vm.su.path = '';
                            vm.su.channel = '';
                            vm.su.assist = '';

                            vm.getInitParams(vm.su.time);

                            $('#myModal').modal('hide')
                            vm.getOrder(1)
                        }

                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });


            },
            getOrder: function (page) {
                var vm = this;
                layer.load(1);
                vm.re.page = page;

                var courier = $("#courierInput").val();
                var driver = $("#driverInput").val();
                var license = $("#licenseInput").val();
                var path = $("#pathInput").val();

                vm.re.courier = courier;
                vm.re.driver = driver;
                vm.re.license = license;
                vm.re.path = path;

                $.ajax({
                    url: '${contextPath}/shop/getDeliveryPathList',
                    type: 'post',
                    data: {
                        stringMap: vm.re
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var rData = data.data;
                        var dataArray = rData.recordList;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = dataArray
                        laypage({
                            cont: 'pageDiv'
                            , pages: rData.pageCount //总页数
                            , groups: 5 //连续显示分页数
                            , curr: rData.currentPage
                            , skin: '#1E9FFF',
                            jump: function (obj, first) {
                                var curr = obj.curr;
                                if (!first) {
                                    app.getOrder(curr)
                                }
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            revocation: function (index) {
                var indx = layer.confirm('确定要撤销吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    console.log(app.orderList[index])
                    layer.close(indx);
                    layer.load(1)
                    //修改订单状态
                    $.ajax({
                        url: '${contextPath}/shop/revocationCourier',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            stringMap: app.orderList[index]
                        },
                        success: function (data) {
                            layer.closeAll('loading');
                            layer.msg(data.message);
                            if (data.success) {
                                app.getOrder();
                                app.getInitParams(app.su.time);
                            }
                        },
                        error: function (error) {
                            layer.msg("网络错误");
                            layer.closeAll('loading')
                        }
                    });
                }, function () {
                });
            },
        },
        watch: {
            'su.channel': function (val) {

                if (!val) {
                    this.params = {
                        couriers: this.users,
                        assists: this.users,
                        drivers: this.users,
                        licenses: this.licenses,
                        paths: this.paths,
                    };
                    return;
                }

                this.params = {
                    couriers: [],
                    assists: [],
                    drivers: [],
                    licenses: [],
                    paths: [],
                };

                var channel = '1'
                if (val == '盘县') {
                    channel = '2';
                }
                for (var index in this.users) {
                    var user = this.users[index];
                    if (user.channel == channel) {
                        this.params.couriers.push(user)
                        this.params.assists.push(user)
                        this.params.drivers.push(user)
                    }
                }
                for (var index in this.licenses) {
                    var license = this.licenses[index];
                    if (license.channel == channel) {
                        this.params.licenses.push(license)
                    }
                }
                for (var index in this.paths) {
                    var path = this.paths[index];
                    if (path.channel == channel) {
                        this.params.paths.push(path)
                    }
                }
            },
        }
    })
    app.getInitData();
    app.getOrder(1)
</script>


